<template>
    <div class="login">
        <div class="left-side fl">
            <LocaleSetting class="locale-setting" />
            <div class="login-module">
                <div class="hy-font">{{ t('login.greeting') }}</div>
                <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" label-position="top">
                    <div class="login-font mt35">{{ t('login.account') }}</div>
                    <ElFormItem label="" prop="username">
                        <el-input v-model="ruleForm.username" placeholder=""></el-input>
                    </ElFormItem>
                    <div class="login-font">{{ t('login.password') }}</div>
                    <ElFormItem label="" prop="password">
                        <el-input v-model="ruleForm.password" type="password" autocomplete="off"></el-input>
                    </ElFormItem>
                    <div class="clearfix">
                        <ElLink class="fl" :underline="false">{{ t('login.forgotPassword') }}</ElLink>
                    </div>
                </ElForm>
                <div class="mt20">
                    <ElButton type="primary" class="login-button" size="large" @click="login(ruleFormRef)">
                        {{ t('login.loginBtn') }}
                    </ElButton>
                </div>
            </div>
        </div>
        <div class="right-side fr">
            <img class="right-side-img" src="../../assets/image/管理员.png" alt="" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { userLogin } from '@/api/api.query.util';
import { setCookie, deleteCookie, debounce } from '@/utils/utils';
import { onLocaleChanged, t } from '@/i18n';
import LocaleSetting from '@/components/LocaleSetting.vue';

const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const ruleForm = reactive({
    username: '',
    password: '',
});
const rules = ref(getRules());
onLocaleChanged(() => {
    rules.value = getRules();
});

function getRules() {
    return {
        username: [
            {
                required: true,
                message: t('login.accountEmptyTip'),
                trigger: 'change',
            },
        ],
        password: [
            {
                required: true,
                message: t('login.passwordEmptyTip'),
                trigger: 'change',
            },
        ],
    };
}

// 组件初始化
init();

function init() {
    clearToken();
}
const login = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            debounce(() => {
                userLogin({
                    method: 'post',
                    data: {
                        name: ruleForm.username,
                        password: ruleForm.password,
                    },
                }).then((res) => {
                    ElMessage({
                        message: t('login.loginSuccessful'),
                        type: 'success',
                    });
                    setCookie('SaaS_Token', res.result);
                    router.push({ path: 'home/ServeList' });
                });
            }, 500);
        }
    });
};

/**
 * 清除 Token
 */
function clearToken() {
    deleteCookie('SaaS_Token');
}
</script>

<style scoped>
.login {
    height: 100%;
}

.left-side {
    width: 50%;
    height: 100%;
    position: relative;
}

.clearfix:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

.clearfix {
    zoom: 1;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.mt35 {
    margin-top: 35px;
}

.mt20 {
    margin-top: 20px;
}

.login-module {
    position: absolute;
    top: 27%;
    left: 27%;
    width: 46%;
    margin: 0 auto;
}

.hy-font {
    font-size: 32px;
    color: #333333;
    line-height: 32px;
}

.login-font {
    font-size: 14px;
    line-height: 14px;
    display: inline-block;
    margin-bottom: 5px;
}

.login-input {
    height: 5%;
    width: 100%;
    display: block;
}

.login-button {
    width: 100%;
    color: #ffffff;
}

.right-side {
    width: 50%;
}
.right-side .right-side-img {
    width: 50%;
    height: 100%;
    position: fixed;
    object-fit: cover;
}
.locale-setting {
    position: absolute;
    top: 20px;
    right: 20px;
}
</style>
